<template>
    <div class="user-icon" :class="[iconBg]" >
        {{ iconText }}
        <svg-icon v-if="showActive"  icon-class="user-active"  class="active-icon"/>
    </div>
</template>
<script>
export default {
    name: 'UserIcon',
    props: {
        userName: {
            type: String,
            default: ''
        },
        showActive:{
            type:Boolean,
            default:false
        }
    },
    data () {
        return {
            iconBg: ''
        }
    },
    created () {
        this.iconBg = `bg${Math.ceil(Math.random()*7)}`
    },
    computed: {
        iconText () {
            if(!this.userName){
                return ''
            }
            let zhReg = /^[\u2E80-\uFE4F]+$/
            let userName = this.userName.toUpperCase()
            if (zhReg.test(userName)) return userName.slice(-2)
            let emptySlice = userName.split(' ')
            if (emptySlice.length > 1) return `${emptySlice[0][0]}${emptySlice[1][0]}`
            let underlineSlice = userName.split('_')
            if (underlineSlice.length > 1) return `${underlineSlice[0][0]}${underlineSlice[1][0]}`
            return userName.slice(0, 2)
        }
    }
}
</script>
<style lang="scss" scoped>
.active-icon{
    width: 18px !important;
    height: 18px !important;
    position: absolute;
    top:0px;
    right: -6px;
}
.user-icon {
    width: 34px;
    height: 34px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1B90FF;
    font-size: 13px;
    color: #FFFFFF;
    // border: 1px solid #DEE6FF;
    box-sizing: border-box;
    position: relative;
}
.bg1 {
    background: #AC7CB8;
    &:hover {
        background: #C38ACF; 
    }
}
.bg2 {
    background: #D48788;
    &:hover {
        background: #F29696; 
    }
}
.bg3 {
    background: #D4A077;
    &:hover {
        background: #F2B482; 
    }
}
.bg4 {
    background: #D5B755;
    &:hover {
        background: #F4CF5A; 
    }
}
.bg5 {
    background: #B4B876;
    &:hover {
        background: #CDD081; 
    }
}
.bg6 {
    background: #53ACD4;
    &:hover {
        background: #5AC2F0; 
    }
}
.bg7 {
    background: #5E8FCF;
    &:hover {
        background: #68A0EA; 
    }
}
</style>